/*
 * @Author: xuhongling
 * @Date:   2023-08-24 14:51:00
 * @Last Modified by:   xuhongling
 * @Last Modified time: 2024-07-02 21:15:12
 */
import dateTimeLabelFormat from '@/hooks/web/useDateTimeFormat';
import { Hformat, Qformat } from '@/hooks/web/useHQPFormat';
import dayjs from 'dayjs';

// ECharts Option
const setChartOption = (stationData, chartData) => {
  console.log(stationData, 'stationDatastationData');
  // 格式化数组水位
  const HArrayFormat = (data) => {
    if (data.length === 0) return [];
    const arrData: any[] = [];
    for (let i = 0; i < data.length; i++) {
      arrData.push([data[i][0], Hformat(data[i][1])]);
    }
    return arrData;
  };

  const chartDataZ: any[] = [];
  const chartDataRain: any[] = [];
  const controlLevelData: any[] = [];
  const xxLevelData: any[] = [];
  const jxLevelData: any[] = [];
   /*controlWaterLevel // 设计水位（米）
   xxLevel // 汛限水位（米）
   jxLevel // 校核水位（米）*/
  for (let i = 0; i < chartData.length; i++) {
    const tm = dayjs(chartData[i].tm).format('YYYY-MM-DD HH:mm:ss');
    chartDataZ.push([tm, chartData[i].waterLevel]);
    chartDataRain.push([tm, chartData[i].rain_5minuteVal]);
    if (stationData.controlWaterLevel) {
      controlLevelData.push([tm, stationData.controlWaterLevel]);
    }
    if (stationData.xxLevel) {
      xxLevelData.push([tm, stationData.xxLevel]);
    }
    if (stationData.jxLevel) {
      jxLevelData.push([tm, stationData.jxLevel]);
    }
  }
  chartDataZ.reverse();
  chartDataRain.reverse();
  // 设置 ECharts Option
  const chartOption = {
    color: ['#000', '#ff0000', '#0000ff', '#5470c6', '#fc8452', '#9a60b4', '#ee6666', '#73c0de', '#3ba272'],
    title: {
      text: `${stationData.stnm}水位过程线`,
      left: 'center',
      top: '10',
      textStyle: {
        fontSize: 16,
      },
    },
    legend: {
      type: 'scroll',
      left: 'center',
      top: '44',
      itemWidth: 16,
      itemHeight: 10,
      data: ['水位', '汛限水位', '设计水位', '校核水位'],
    },
    xAxis: {
      type: 'time',
      boundaryGap: false,
      axisLine: {
        lineStyle: {
          type: 'solid',
          color: '#333',
        },
      },
      axisTick: {
        show: true,
        inside: true,
        interval: 'auto',
        lineStyle: {
          color: '#999',
        },
      },
      splitLine: {
        show: false,
        lineStyle: {
          type: 'dashed',
          color: '#f4f4f4',
        },
      },
      axisLabel: {
        show: true,
        margin: 14,
        color: '#333',
        fontSize: 12,
        formatter: (value, index) => {
          return dateTimeLabelFormat(value, index);
        },
      },
    },
    yAxis: [
      {
        type: 'value',
        position: 'left',
        name: '水位(m)',
        scale: true,
        splitNumber: 5,
        boundaryGap: ['5%', '5%'],
        nameTextStyle: {
          color: '#333',
        },
        axisTick: {
          show: false,
          inside: true,
          lineStyle: {
            color: '#999',
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#333',
          },
        },
        axisLabel: {
          show: true,
          color: '#333',
          fontSize: 12,
          formatter(value) {
            if (value) {
              return Hformat(value);
            }
          },
        },
        splitLine: {
          show: false,
          lineStyle: {
            type: 'dashed',
            color: '#f4f4f4',
          },
        },
      },
      /*{
        type: 'value',
        position: 'right',
        name: '降雨量(mm)',
        scale: true,
        splitNumber: 5,
        boundaryGap: ['0', '5%'],
        nameTextStyle: {
          color: '#12c277',
        },
        axisTick: {
          show: false,
          inside: true,
          lineStyle: {
            color: '#12c277',
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#12c277',
          },
        },
        axisLabel: {
          show: true,
          color: '#12c277',
          fontSize: 12,
        },
        splitLine: {
          show: false,
          lineStyle: {
            type: 'dashed',
            color: '#f4f4f4',
          },
        },
      },*/
    ],
    series: [
      {
        name: '水位',
        type: 'line',
        yAxisIndex: 0,
        showSymbol: false,
        connectNulls: true,
        lineStyle: {
          color: '#000',
          width: 2,
        },
        markPoint: {
          symbol: 'pin',
          symbolSize: [90, 40],
          symbolRotate: (params) => {
            if (params.name === '最大值') {
              return 0;
            }
            return 180;
          },
          data: [
            {
              type: 'max',
              name: '最大值',
              label: {
                formatter: (params) => {
                  return Hformat(params.value);
                },
              },
              itemStyle: {
                color: 'rgba(255, 0, 0, 0.8)',
              },
            },
            {
              type: 'min',
              name: '最小值',
              label: {
                padding: [16, 0, 0, 0],
                formatter: (params) => {
                  return Hformat(params.value);
                },
              },
              itemStyle: {
                color: 'rgba(10, 210, 0, 0.8)',
              },
            },
          ],
        },
        data: HArrayFormat(chartDataZ),
      },
      {
        name: '设计水位',
        type: 'line',
        showSymbol: false,
        yAxisIndex: 0,
        connectNulls: true,
        lineStyle: {
          color: '#009AFF',
          width: 1,
          type: 'dashed',
        },
        emphasis: {
          focus: 'series'
        },
        markPoint: {
          symbol: 'rect',
          symbolSize: [40, 20],
          data: [
            {
              type: 'average',
              name: '设计水位',
              x: '50%',
              label: {
                padding: [4, 4, 2, 4],
                color: '#fff',
                align: 'center',
                verticalAlign: 'middle',
                borderRadius: 4,
                backgroundColor: '#009AFF',
                formatter: (params)=>{
                  return `设计水位：${Hformat(params.value)}m`
                }
              },
              itemStyle: {
                color: "transparent"
              },
            },
          ],
        },
        data: controlLevelData,
      },
      {
        name: '汛限水位',
        type: 'line',
        showSymbol: false,
        yAxisIndex: 0,
        connectNulls: true,
        lineStyle: {
          color: '#F0B10E',
          width: 1,
          type: 'dashed',
        },
        emphasis: {
          focus: 'series'
        },
        markPoint: {
          symbol: 'rect',
          symbolSize: [40, 20],
          data: [
            {
              type: 'average',
              name: '汛限水位',
              x: '50%',
              label: {
                padding: [4, 4, 2, 4],
                color: '#fff',
                align: 'center',
                verticalAlign: 'middle',
                borderRadius: 4,
                backgroundColor: '#F0B10E',
                formatter: (params)=>{
                  return `汛限水位：${Hformat(params.value)}m`
                }
              },
              itemStyle: {
                color: "transparent"
              },
            },
          ],
        },
        data: xxLevelData,
      },
      {
        name: '校核水位',
        type: 'line',
        showSymbol: false,
        yAxisIndex: 0,
        connectNulls: true,
        lineStyle: {
          color: '#BA35C9',
          width: 1,
          type: 'dashed',
        },
        emphasis: {
          focus: 'series'
        },
        markPoint: {
          symbol: 'rect',
          symbolSize: [40, 20],
          data: [
            {
              type: 'average',
              name: '校核水位',
              x: '50%',
              label: {
                padding: [4, 4, 2, 4],
                color: '#fff',
                align: 'center',
                verticalAlign: 'middle',
                borderRadius: 4,
                backgroundColor: '#BA35C9',
                formatter: (params)=>{
                  return `校核水位：${Hformat(params.value)}m`
                }
              },
              itemStyle: {
                color: "transparent"
              },
            },
          ],
        },
        data: jxLevelData,
      },
      /*{
        name: '雨量',
        type: 'bar',
        yAxisIndex: 1,
        barMaxWidth: 10, //柱图宽度
        itemStyle: {
          color: '#12c277',
        },
        data: chartDataRain,
      },*/
    ],
  };
  return chartOption;
};

export default setChartOption;
